<template>
  <div>
  <el-container>
    <el-header>
      <div class="left">
        蜗牛银行管理系统
      </div>
      <div class="right">
        【 {{user.username}} 】, <a href="javascript:;" @click="quit">退出</a>
      </div>
      
    </el-header>
    <el-container>
      <el-aside width="240px">
        <el-col  width="240px">
            
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">
              <el-menu-item index="1" @click="$router.push('/system/companyCustom')">
                <i class="el-icon-document"></i>
                <span slot="title">对公客户</span>
              </el-menu-item>
              <el-menu-item index="2" @click="$router.push('/system/dealWater')">
                <i class="el-icon-menu"></i>
                <span slot="title">流水信息</span>
              </el-menu-item>
              <el-menu-item index="3" @click="$router.push('/system/business')">
                <i class="el-icon-document"></i>
                <span slot="title">综合业务</span>
              </el-menu-item>
              <el-menu-item index="4" @click="$router.push('/system/accounts')">
                <i class="el-icon-setting"></i>
                <span slot="title">个人开户</span>
              </el-menu-item>
            </el-menu>
          </el-col>

      </el-aside>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <el-footer height="40px">蜗牛银行</el-footer>
  </el-container>
  </div>
</template>

<script>
import axios from '../../http/axios'
import {createNamespacedHelpers} from 'vuex';
const {mapState, mapActions} = createNamespacedHelpers('users')
export default {
  mounted() {
    this.getUserInfo()
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // async getUserInfo() {
    //   const {data} = await axios({
    //     url:'/users/getUserInfo',
    //   })
    //   console.log(data);
    //   this.user = data.data.username
    // },
    quit() {
      localStorage.removeItem('token')
      this.$router.push('/login');
    },
    ...mapActions(['getUserInfo'])
    
    
  },
  computed: {
    ...mapState(['user'])
  }
}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
  }
  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    /* text-align: center; */
    /* line-height: 400px; */
    height: calc(100vh - 100px);
    background-color: #fff;
    
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>